<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: 小白</div>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div ref="chart" style="height: 500px" class="w">

          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <div ref="chart1" style="height: 500px" class="w">

          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  methods: {},
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  mounted() {
    var app = {};

    var myChart = echarts.init(this.$refs.chart);
    var option;
    const posList = [
      "left",
      "right",
      "top",
      "bottom",
      "inside",
      "insideTop",
      "insideLeft",
      "insideRight",
      "insideBottom",
      "insideTopLeft",
      "insideTopRight",
      "insideBottomLeft",
      "insideBottomRight",
    ];
    app.configParameters = {
      rotate: {
        min: -90,
        max: 90,
      },
      align: {
        options: {
          left: "left",
          center: "center",
          right: "right",
        },
      },
      verticalAlign: {
        options: {
          top: "top",
          middle: "middle",
          bottom: "bottom",
        },
      },
      position: {
        options: posList.reduce(function (map, pos) {
          map[pos] = pos;
          return map;
        }, {}),
      },
      distance: {
        min: 0,
        max: 100,
      },
    };
    app.config = {
      rotate: 90,
      align: "left",
      verticalAlign: "middle",
      position: "insideBottom",
      distance: 15,
      onChange: function () {
        const labelOption = {
          rotate: app.config.rotate,
          align: app.config.align,
          verticalAlign: app.config.verticalAlign,
          position: app.config.position,
          distance: app.config.distance,
        };
        myChart.setOption({
          series: [
            {
              label: labelOption,
            },
            {
              label: labelOption,
            },
            {
              label: labelOption,
            },
          ],
        });
      },
    };
    const labelOption = {
      position: app.config.position,
      distance: app.config.distance,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      rotate: app.config.rotate,
      formatter: "{c}  {name|{a}}",
      fontSize: 16,
      rich: {
        name: {},
      },
    };
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      title: {
        text: "价格数量分布",
      },
      legend: {
        data: ["公寓", "住宅", "商铺"],
      },
      xAxis: [
        {
          type: "category",
          axisTick: { show: false },
          data: ["2018", "2019", "2020", "2021", "2022"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "公寓",
          type: "bar",
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390],
        },
        {
          name: "住宅",
          type: "bar",
          label: labelOption,
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290],
        },
        {
          name: "商铺",
          type: "bar",
          label: labelOption,
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190],
        },
      ],
    };
    option && myChart.setOption(option);
    var myChart1 = echarts.init(this.$refs.chart1);
var option;

option = {
   title: {
        text: "房产数量比例",
      },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '公寓' },
        { value: 735, name: '住宅' },
        { value: 580, name: '商铺' },
      ]
    }
  ]
};

option && myChart1.setOption(option);

  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.w {
  width: 800px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
  margin-top: 20px;
}
</style>
